<script setup>
import {ref, onMounted} from "vue";
import MarkdownIt from 'markdown-it';
import highlight from 'markdown-it-highlightjs';
import hljs from 'highlight.js';

// 创建 MarkdownIt 实例
const md = new MarkdownIt({
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(str, { language: lang }).value;
            } catch (_) {}
        }

        return ''; // 未识别的语言或高亮失败时返回空字符串
    }
});
const content = ref("")
const accordionHTML = ref("");
const reg_process_step = /&lt;process_step&gt;[\s\S]*?&lt;\/process_step&gt;/g;
const removeProcessStepContent = (markdown) => {
    // 替换匹配到的内容为空字符串
    markdown = markdown.replace(/<process_step>[\s\S]*?<\/process_step>/g, "");
    return markdown.replace(reg_process_step, "");
};
const generateAccordionFromSteps = (markdown) => {
    console.log("被触发了");
    const stepRegex = /<process_step>([\s\S]*?)<\/process_step>/g;
    let matches = [];
    let match;
    while ((match = stepRegex.exec(markdown)) !== null) {
        matches.push(match[1]);
    }
    if (matches.length === 0) return "";

    // 这里要将内容的生成过程，也就是 accordionHTML，显示出代码，因为后端返回的有markdown格式的内容
    let accordionItems = matches.map((content, index) => {
        content = md.render(content);
        const backgroundColor = index % 2 === 0 ? "#131313" : "#000000";
        return `<li class='list-group-item' style='background-color: ${backgroundColor}; border: none; color: #acacac;'>${content}</li>`;
    });

    return `
    <div class='collapse'>
        <div class='card' style='border-color: #131313;background-color: #000000'>
          <ul class='list-group list-group-flush'>
            ${accordionItems.join("")}
          </ul>
        </div>
    </div>
  `;
}
const test = ()=>{
    content.value = content.value.replaceAll(/<\/process_step>/g, "\n")
    // accordionHTML.value = generateAccordionFromSteps(content.value);
    // console.log("accordionHTML.value:", accordionHTML.value)
    // content.value = removeProcessStepContent(content.value)
}
onMounted(() => {
    content.value = "<process_step>储备碱式碳酸锌2吨，用于处理含H2S的钻井液，防止人员中毒。</process_step>\n\n延1808-1井在钻井过程中主要需要规避的风险是H2S气体的出现。具体措施包括储备碱式碳酸锌2吨以处理含H2S的钻井液，以及遵循相关标准确保安全应对措施得当。\n\n回答完毕"

});

</script>

<template>
    <el-button @click="test">测试</el-button>
    <span>{{content}}</span>
    ====<p></p>
    {{accordionHTML}}
</template>

<style scoped>

</style>